{% extends "base.html" %}

{% block title %}关于{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-10 mx-auto">
        <h2 class="mb-4"><i class="fas fa-info-circle text-primary"></i> 关于JYB工具箱</h2>
        
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">项目简介</h5>
                <p class="card-text">
                    JYB工具箱是一个基于Flask开发的开箱即用的Web应用，旨在提供多种日常办公工具，
                    帮助我提高工作效率，我会尽量保持更新，添加更多实用工具。
                </p>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">功能特点</h5>
                <ul>
                    <li>
                        <strong>Excel导出测试文档：</strong>将Excel表格数据导出为Word测试文档，自动生成多级标题结构
                    </li>
                    <li>
                        <strong>文档批量替换：</strong>
                        <span class="badge bg-warning text-dark ms-1">全新升级</span>
                        <ul class="mt-2">
                            <li>支持单文件和文件夹批量上传</li>
                            <li>单条替换和批量规则两种模式</li>
                            <li>支持Word文档（含页眉页脚）</li>
                            <li>正则表达式和大小写敏感选项</li>
                            <li>批次管理，保持目录结构</li>
                            <li>ZIP批量下载，规则执行详情展示</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 详细使用说明 -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-book text-success"></i> 详细使用说明</h5>
                
                <div class="accordion mt-3" id="usageAccordion">
                    <!-- Excel导出测试文档 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#usage1">
                                <i class="fas fa-file-export me-2"></i> Excel导出测试文档工具
                            </button>
                        </h2>
                        <div id="usage1" class="accordion-collapse collapse show" data-bs-parent="#usageAccordion">
                            <div class="accordion-body">
                                <h6>功能说明：</h6>
                                <p>将Excel表格中的多级标题数据导出为Word测试文档，自动生成标题结构并插入测试表格。</p>
                                <h6>使用步骤：</h6>
                                <ol>
                                    <li><strong>上传Excel文件</strong>：选择包含测试数据的Excel文件（.xlsx 或 .xls）</li>
                                    <li><strong>查看文件信息</strong>：系统会自动显示文件的行数、列数等信息</li>
                                    <li><strong>选择数据区域</strong>：
                                        <ul class="mt-2 mb-2">
                                            <li>起始行、结束行：输入<strong>数字</strong>（例如：1、10）</li>
                                            <li>起始列、结束列：输入<strong>字母</strong>（例如：A、D）<span class="badge bg-success ms-2">直观易用！</span></li>
                                        </ul>
                                    </li>
                                    <li><strong>开始导出</strong>：点击"开始导出"按钮执行导出</li>
                                    <li><strong>下载文档</strong>：导出成功后下载生成的Word文档</li>
                                </ol>
                                <h6>数据格式要求：</h6>
                                <ul>
                                    <li>每列代表一个层级（<strong>A列</strong>=一级标题，<strong>B列</strong>=二级标题等）</li>
                                    <li>使用斜杠 (/ 或 \) 表示继承上一行的值</li>
                                    <li>支持最多9个层级（A-I列）</li>
                                    <li>导出时会自动添加固定的一级标题"功能测试记录"</li>
                                </ul>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> 
                                    <strong>模板设置：</strong>管理员需要在 <code>templates/word_templates/test_template.docx</code> 放置Word模板文件。
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文档批量替换 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#usage2">
                                <i class="fas fa-edit me-2"></i> 文档批量替换工具 
                                <span class="badge bg-warning text-dark ms-2">v2.0 全新升级</span>
                            </button>
                        </h2>
                        <div id="usage2" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
                            <div class="accordion-body">
                                <h6>功能说明：</h6>
                                <p>在多个文档中批量查找和替换指定内容，支持Word文档（.docx）。</p>
                                
                                <div class="alert alert-info">
                                    <h6 class="alert-heading"><i class="fas fa-star"></i> v2.0 新功能亮点</h6>
                                    <ul class="mb-0">
                                        <li>✨ 支持文件夹批量上传，自动保持目录结构</li>
                                        <li>📋 批量替换规则模式，一次应用多条规则</li>
                                        <li>📄 完整支持页眉、页脚、表格内容替换</li>
                                        <li>📦 智能批次管理，唯一ID隔离</li>
                                        <li>📥 ZIP批量下载，单文件下载</li>
                                    </ul>
                                </div>
                                
                                <h6 class="mt-3">📂 文件上传模式：</h6>
                                <ul>
                                    <li><strong>选择文件：</strong>单独选择多个文件（自动去重）</li>
                                    <li><strong>选择文件夹：</strong>上传整个文件夹，保持完整目录结构</li>
                                </ul>
                                
                                <h6>🔄 替换模式：</h6>
                                
                                <div class="card mb-3">
                                    <div class="card-header bg-success bg-opacity-10">
                                        <strong>1️⃣ 单条替换模式</strong>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>适用场景：</strong>需要替换一个特定的内容</p>
                                        <p><strong>使用步骤：</strong></p>
                                        <ol>
                                            <li>选择"单条替换"模式</li>
                                            <li>上传文件或文件夹</li>
                                            <li>输入查找内容和替换内容</li>
                                            <li>选择是否使用正则表达式和区分大小写</li>
                                            <li>点击"开始替换"</li>
                                            <li>下载处理后的文件</li>
                                        </ol>
                                    </div>
                                </div>
                                
                                <div class="card mb-3">
                                    <div class="card-header bg-warning bg-opacity-10">
                                        <strong>2️⃣ 批量替换规则模式</strong> <span class="badge bg-warning text-dark">推荐</span>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>适用场景：</strong>需要同时替换多个不同的内容</p>
                                        <p><strong>规则文件格式：</strong></p>
                                        <div class="bg-light p-3 rounded mb-2">
                                            <code>
                                                # 这是注释行，以 # 开头<br>
                                                # 格式：查找内容:替换内容<br>
                                                <br>
                                                旧文本:新文本<br>
                                                错误词:正确词<br>
                                                测试:Test<br>
                                                公司名称:ABC Corporation
                                            </code>
                                        </div>
                                        <p><strong>使用步骤：</strong></p>
                                        <ol>
                                            <li>选择"批量替换规则"模式</li>
                                            <li>准备规则文件（.txt格式，每行一条规则）</li>
                                            <li>上传规则文件，查看预览</li>
                                            <li>上传要处理的文件或文件夹</li>
                                            <li>点击"开始替换"</li>
                                            <li>查看每条规则的执行详情</li>
                                            <li>下载处理后的文件</li>
                                        </ol>
                                        <div class="alert alert-success mt-2 mb-0">
                                            <small>
                                                <i class="fas fa-lightbulb"></i> 
                                                <strong>规则文件特点：</strong>
                                                支持注释（#开头）、自动忽略空行、替换内容可包含冒号、支持多种编码（UTF-8、GBK等）
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <h6>⚙️ 高级选项：</h6>
                                <ul>
                                    <li><strong>使用正则表达式：</strong>支持正则表达式模式匹配</li>
                                    <li><strong>区分大小写：</strong>默认开启，可选择不区分大小写</li>
                                </ul>
                                
                                <h6>📊 处理结果：</h6>
                                <ul>
                                    <li>实时显示处理进度</li>
                                    <li>详细的文件处理统计</li>
                                    <li>批量规则模式下可展开查看每条规则的执行情况</li>
                                    <li>单文件下载或ZIP批量下载</li>
                                </ul>
                                
                                <h6>📝 支持的替换范围：</h6>
                                <div class="card bg-light mb-2 mt-2">
                                    <div class="card-body p-2">
                                        <strong>Word文档 (.docx)</strong>
                                        <ul class="small mb-0 mt-1">
                                            <li>✅ 正文段落</li>
                                            <li>✅ 正文表格</li>
                                            <li>✅ 页眉段落和表格</li>
                                            <li>✅ 页脚段落和表格</li>
                </ul>
                                    </div>
                                </div>
                                
                                <div class="alert alert-warning mt-3">
                                    <i class="fas fa-exclamation-triangle"></i> 
                                    <strong>注意事项：</strong>
                                    <ul class="mb-0">
                                        <li>处理后的文件保存在独立的批次目录中，原文件不会被修改</li>
                                        <li>每个批次有唯一ID，不同批次的文件互不影响</li>
                                        <li>批量规则按顺序执行，后面的规则会在前面规则的结果上继续替换</li>
                                        <li>相同文件名会自动去重，只保留一个</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">技术栈</h5>
                <p class="card-text">
                    <span class="badge bg-primary">Python</span>
                    <span class="badge bg-success">Flask</span>
                    <span class="badge bg-info">Bootstrap 5</span>
                    <span class="badge bg-warning">python-docx</span>
                    <span class="badge bg-secondary">openpyxl</span>
                    <span class="badge bg-dark">lxml</span>
                </p>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">版本信息</h5>
                <p class="card-text">
                    <strong>当前版本：</strong>v2.0.0 <span class="badge bg-success">重大更新</span><br>
                    <strong>更新日期：</strong>2025-10-23<br>
                    <strong>最新改进：</strong>文档批量替换功能全面升级
                </p>
                <div class="alert alert-success mt-3 mb-0">
                    <h6 class="alert-heading"><i class="fas fa-star"></i> v2.0.0 重大更新亮点</h6>
                    <ul class="mb-0">
                        <li>✨ 支持文件夹批量上传，保持完整目录结构</li>
                        <li>📋 新增批量替换规则模式，一次应用多条替换规则</li>
                        <li>📄 支持Word页眉页脚内容替换</li>
                        <li>📦 智能批次管理，ZIP一键打包下载</li>
                        <li>📊 详细的规则执行统计和结果展示</li>
                    </ul>
                </div>
                <p class="text-muted mt-2 mb-0">
                    <small>
                        <i class="fas fa-info-circle"></i> 
                        完整更新日志请查看项目根目录的 <code>版本更新日志.md</code> 文件
                    </small>
                </p>
            </div>
        </div>

        <div class="card border-primary">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-user-circle"></i> 联系开发者</h5>
            </div>
            <div class="card-body">
                <p class="card-text">
                    如果您在使用过程中遇到问题或有任何建议，欢迎联系我。
                </p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center p-3 bg-light rounded">
                            <i class="fas fa-user fa-2x text-primary me-3"></i>
                            <div>
                                <small class="text-muted d-block">开发者</small>
                                <strong class="fs-5">{{ developer_name }}</strong>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center p-3 bg-light rounded">
                            <i class="fab fa-weixin fa-2x text-success me-3"></i>
                            <div>
                                <small class="text-muted d-block">微信号</small>
                                <strong class="fs-5"><code>{{ developer_wechat }}</code></strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

